<template>
<div class="detail-root">
  <div class="title">主题详情</div>
  <NavBtns></NavBtns>
  <div class="block n1">
    <div class="cont">
      <div class="title">概述</div>
      <div class="sub">南海纷争</div>
      <div class="linewrap innerscr">
        <div v-for="line in content">{{line}}</div>
      </div>
    </div>
  </div>
  <div class="block n2">
    <div class="cont">
      <div class="title">事件详情</div>
      <div class="linewrap innerscr">
        <div class="line" v-for="line in lines" :class="{active: line.more}">
          <div class="title">{{line.title}}</div>
          <div class="cont" v-html="line.cont"></div>
          <div class="more" @click="line.more = !line.more"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import NavBtns from './common/NavBtns'

let mdata = [
  {title: '事件描述', cont: '美军 南海 军演', more: false},
  {title: '隶属主题', cont: '南海纷争、太平洋军演', more: false},
  {title: '事件涉及地点', cont: '南海、太平洋、华盛顿、北京', more: false},
  {title: '事件涉及时间点', cont: '2015-10-24<br>2013-11-30<br>2010-05-01<br>2004-09-21', more: true},
  {title: '事件涉及人物', cont: '奥巴马、普京', more: false},
  {title: '关联事件', cont: '朝鲜 联合国 制裁', more: false}
]

export default {
  name: 'detail',
  components: {NavBtns},
  data(){
    return {
      content: `
南海名称很早就出现于古籍。周朝诗经《江汉》记载：“江汉之浒，王命召虎：式辟四方，彻我疆土。匪疚匪棘，王国来极。于疆于理，至于南海。”也就是说，南海自周宣王时期起，就是中国的。
民国时期
谢承《后汉书》说“交趾七郡贡献皆从涨海出入”。东汉杨孚《异物志》记载：“涨海崎头，水浅而多磁石，徼外人乘大舶，皆以铁锢之，至此关，以磁石不得过。”三国吴万震《南州异物志》称：“东北行，极大崎头出涨海，中浅而多磁石”。宋李昉等撰《太平御览》引三国吴康泰《扶南传》：“涨海中到珊瑚洲”。
“涨海”之称一直延续到南北朝，而《梁书》卷54《海南诸国列传》：“干陁国在南海洲上”（干陁国故地在今苏门答腊岛），已开始使用“南海”名称，至唐宋时期“南海”之称渐多，初唐被流放越南的诗人沈佺期有“身投南海西”的诗句（《赦到不得归题江上石》）。以上引述说明，远在1500年前中国人民已经认识南海和南海诸岛，把南海称为“涨海”、“南海”；南海诸岛泛称“涨海崎头”、“珊瑚洲”；而以“磁石”指称暗礁暗滩，其含意是南海暗礁暗滩多，来往船只搁浅难脱，象被磁石吸住一样。[2] 
《琼州府志》在解释“涨海”的含义时说：“南溟者天池也，地极燠，故曰炎海；水恒溢，故曰涨海。” 清初学者屈大均《广东新语》也有类似解释：“炎海善溢，故曰‘涨海’。”反映中国古人对南海潮汐现象的认识。南海在古代除了称为“涨海”、“南海”、“炎海”之外，还有“朱崖海”（晋郭璞注《山海经》：“（离耳国）即儋耳也，在朱崖海水中”；又唐李善对晋左思《吴都赋》注：“朱崖海中有渚……”）、“大洲洋”、“琼洋”（《崖州志》：“州东接大洲洋，有千里石塘、万里长沙，为琼洋最险之处”，《琼州府志》同此）、“琼海”（清陈伦炯《海国闻见录》：“至琼海万州，曰万里长沙……”；《琼州府志》：“则琼之海，其涨海乎”）等。对南海诸岛的称呼，除了上述“涨海崎头”、“珊瑚洲”之外，还有“木饮州”（前引唐李善对《吴都赋》“饮木”一词的注：“朱崖海中有渚，东西五百里，南北千里，无水泉，有木斩之，以盆瓮承其汁而饮之”，按“饮木”当指饮椰子汁；唐段成式《酉阳杂俎》：“木饮州，珠崖一州，其地无泉，民不作井，皆仰树汁为用”）等。其中康泰《扶南传》关于“涨海中到珊瑚洲，洲底有盘石，珊瑚生其上也”的记载，是世界上最早对南海诸岛珊瑚岛礁成因作出的科学说明。
      `.trim().split('\n'),
      lines: mdata
    }
  }
}
</script>

<style scoped lang="stylus">
.block
  position absolute
  top 108px
  left 46px
  right 50px
  bottom 50px
  width 902px
  border-style solid
  border-width 38px 41px
  border-image url(./Topic/img/map-border.png) 38 41
  border-image-outset 9px
  box-sizing border-box
  &.n1
    right auto
  &.n2
    left auto
  >.cont
    background rgba(0,0,0,.3)
    position absolute
    top -26px
    left -29px
    right -29px
    bottom -26px

.block>.cont
  padding 16px
  display flex
  flex-direction column
  align-items center
  >.title
    font-size 24px
    line-height 30px
    margin-bottom 8px
    color #59b3ff
    align-self flex-start
    &:after
      content: ''
      display: inline-block
      box-sizing: border-box
      height: 10px
      width: 10px
      vertical-align: 3px
      border: 1px solid #59b3ff
      border-radius: 50%
      margin: 0 0 0 10px
      box-shadow: 0 0 5px 1px #036be1, inset 0 0 5px #036be1
  >.linewrap
    height 640px
    width 78%
    padding 0 6%
    overflow-y scroll
    margin-bottom 30px

.block.n1>.cont    
  >.sub
    color #dc2f12
    border-bottom 2px solid #dc2f12
    font-size 30px
    line-height 48px
    margin-bottom 20px
  >.linewrap
    line-height 24px
    width 72%
    position relative
    font-size 16px
    mask-image linear-gradient(#000 85%, transparent)

.block.n2>.cont
  >.title
    margin-bottom 76px
  >.btns
    width 70%
    display flex
    justify-content space-around

.line
  display flex
  border-bottom 1px solid rgba(89,179,255,.4)
  font-size 16px
  line-height 30px
  padding 15px 0
  box-sizing border-box
  >.title
    flex none
    width 43%
    color #9d9d9d
    &:after
      content '：'
  >.cont
    flex auto
    height @line-height
    overflow hidden
  >.more
    flex 0 0 auto
    font-size 12px
    color #ca5f08
    align-self flex-end
    cursor pointer
    &:before
      content '展开'
.line.active
  >.cont
    height auto
  >.more:before
    content '收起'
</style>